/*
 * @Author: xiehangyun 
 * @Date: 2025-02-22 09:43:34 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-02-22 09:50:51
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./brushType.module.less";
import graffitiStore from "../../graffitiStore";
import { Radio } from 'antd';
const { Group: RadioGroup } = Radio;

interface Iprops {
  children?: ReactNode
}

// 画笔类型
export default function BrushType() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [brushType, setBrushType] = useState(graffitiStore.brushType);

  useEffect(() => {
  }, []);

  useEffect(() => autorun(() => {
    setBrushType(graffitiStore.brushType);
  }, { delay: 30 }), []);

  return (
    <div
      ref={dom}
      className={styles.brushType}
    >

      <RadioGroup
        size="small"
        value={brushType}
        onChange={(e) => graffitiStore.setBrushType(e.target.value)}
        buttonStyle="solid"
      >
        <Radio.Button value="pencil">画笔</Radio.Button>
        <Radio.Button value="eraser">橡皮擦</Radio.Button>
      </RadioGroup>
      &nbsp;
    </div>
  );
}